<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习</title>
    </head>
    <body>
        <!-- <p>最近的天气很凉快</p> -->

        <input type="password" id="pwd">
        <span id="pwdInfo"></span>

        <script>
            var inp = document.querySelector('#pwd');

            inp.onblur = function(){
                var inp_pwd = this.value;

                var reg = /^[a-z]{6,8}$/;

                var pwdInfo = document.querySelector('#pwdInfo');

                if(reg.test(inp_pwd)){
                    pwdInfo.innerHTML = '符合规范';
                    pwdInfo.style.color = 'green';
                }else{
                    pwdInfo.innerHTML = '不符合规范';
                    pwdInfo.style.color = 'red';
                }
            }














            // innerText 和 textContent的区别？
            // （1）innerText不可以获取隐藏元素的内容
            //      textContent可以获取隐藏元素的内容
            // （2）innerText可以在高低级浏览器中都可以使用
            //      textContent只能在高级浏览器中使用，低级浏览器中
            //      如果使用textContent则会返回undefined
            
            // 需求：如果你使用的高级浏览器 那么我们就使用textContent来
            // 获取内容
            //       如果你使用的低级浏览器  那么我们就使用innerText来
            // 获取内容

            // function getOrSetContent(node){

                // if(node.textContent){
                //     console.log(node.textContent);
                // }else{
                //     console.log(node.innerText);
                // }

                // node.textContent ? node.textContent : node.innerText;

            //     node.textContent || node.innerText;
            // }

            // var p = document.querySelector('p');

            // getOrSetContent(p);
        </script>
    </body>
</html>